import { PureComponent } from 'react'
import { Modal, Input, Select,Upload } from 'antd'
import styles from './expressModal.less'
const { Option } = Select
class ExpressModal extends PureComponent{
    handleCancel = () => {
        const { onCancel } = this.props
        onCancel()
    }
    handleOk = () => {
        const { onOk } = this.props
        onOk()
    }
    render(){
        const { visible } = this.props
        return(
            <Modal
                title="创建快递员"
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            >
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>头像：</span>
                    <div className={styles.expressModalInput} style={{display: 'inline-block',marginLeft: '-20px'}}>
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            style={{width: '102px',height: '102px'}}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        >
                            <img src='https://www.mocky.io/v2/5cc8019d300000980a055e76' alt="avatar" /> 
                        </Upload>
                    </div>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>账户：</span>
                    <Input className={styles.expressModalInput}/>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>密码：</span>
                    <Input className={styles.expressModalInput}/>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>所属目的港：</span>
                    <Select className={styles.expressModalInput}>
                        <Option value="value">value</Option>
                    </Select>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>所属站点：</span>
                    <Select className={styles.expressModalInput}>
                        <Option value="value">value</Option>
                    </Select>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>电话：</span>
                    <Input className={styles.expressModalInput}/>
                </div>
                <div className={styles.expressModalSearch}>
                    <span className={styles.expressModalSpan}>居住地址：</span>
                    <Input className={styles.expressModalInput}/>
                </div>
            </Modal>
        )
    }
}
export default ExpressModal